
<template>
    <div>
        <div class="el-table">
          <el-table
              :data="tableData"
              height="300px"
              border
              :header-cell-style="{
            'background-color': 'rgb(64, 158, 255)!important',
            color: 'rgb(255, 255, 255)',
            font: '16px/20px arial,sans-serif',
            border: '1px rgb(64, 158, 255) solid',
            textAlign: 'center'
          }"
              style="width: 100%"
          >
            <el-table-column prop="date" label="日期" align="center">
            </el-table-column>
            <el-table-column v-if="dataKeys.includes('all')"  prop="all" label="整体" width="180" align="center">
            </el-table-column>
            <el-table-column v-if="dataKeys.includes('storyMember')"  prop="storyMember" label="故事会员" align="center"> </el-table-column>
            <el-table-column v-if="dataKeys.includes('listenMember')"  prop="listenMember" label="听书会员" align="center"> </el-table-column>
            <el-table-column v-if="dataKeys.includes('story')"  prop="story" label="故事" align="center"> </el-table-column>
            <el-table-column v-if="dataKeys.includes('knowledge')"  prop="knowledge" label="知识付费" align="center"> </el-table-column>
          </el-table>
        </div>
    </div>
</template>
<script>
export default {
    name: 'ksform',
    props: {
        id: {
            type: String,
            default: ""
        },
        type: {
            type: String,
            default: ""
        }
    },

    data () {
        return {
          tableData: [
            {
              date: "2016-05-02",
              all: "0",
              storyMember: "0",
              listenMember: '0',
              story: '0',
              knowledge:'0'
            },
            {
              date: "2016-05-02",
              all: "0",
              storyMember: "0",
              listenMember: '0',
              story: '0',
              knowledge:'0'
            },
            {
              date: "2016-05-02",
              all: "0",
              storyMember: "0",
              listenMember: '0',
              story: '0',
              knowledge:'0'
            },
            {
              date: "2016-05-02",
              all: "0",
              storyMember: "0",
              listenMember: '0',
              story: '0',
              knowledge:'0'
            },
            {
              date: "2016-05-02",
              all: "0",
              storyMember: "0",
              listenMember: '0',
              story: '0',
              knowledge:'0'
            },
            {
              date: "2016-05-02",
              all: "0",
              storyMember: "0",
              listenMember: '0',
              story: '0',
              knowledge:'0'
            },
            {
              date: "2016-05-02",
              all: "0",
              storyMember: "0",
              listenMember: '0',
              story: '0',
              knowledge:'0'
            },
            {
              date: "2016-05-02",
              all: "0",
              storyMember: "0",
              listenMember: '0',
              story: '0',
              knowledge:'0'
            },
            {
              date: "2016-05-02",
              all: "0",
              storyMember: "0",
              listenMember: '0',
              story: '0',
              knowledge:'0'
            },
            {
              date: "2016-05-02",
              all: "0",
              storyMember: "0",
              listenMember: '0',
              story: '0',
              knowledge:'0'
            },
          ],
          dataKeys: []
        }
    },
    computed: {
    },
    mounted () {},
    methods: {
      // 全量数据更新
      search (formData) {
        console.log(formData)
        this.tableData = formData
        console.log(formData[0])
        this.dataKeys = Object.keys(formData[0])
        console.log(this.dataKeys)
      },
    }
}
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.box-card {
  width: 100%;
  height: 100%;
  position: relative;
}
.el-date-picker {
  width: 256px;
  margin-top: 30px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
}
.el-table {
  margin-top: 20px!important;
}
.spanAndEl {
  width: 100px;
  height: 40px;
  position: absolute;
  top: 0;
  left: -108px;
  z-index: 100;
  font-size: 18px;
  line-height: 40px;
}
.AndEl {
  width: 249px;
  margin-top: 30px;
  position: absolute;
  top: 0;
  left: 130px;
  z-index: 100;
  font-size: 18px;
}
</style>
